<template>
  <div class="box">
        <header class="header">
            <div class="a1">
                <img src="/static/imgs_s10/S_10order1.08.png" alt="">
                <div></div>
                <span>请输入商品名称</span>
            </div>
            <div class="a2">
                <span>搜索</span>
            </div>
        </header>
        <section>
            <ul class="ul1">
                <li>全部</li>
                <li>烧烤轰趴</li>
                <li>小龙虾</li>
                <li class="li4">
                    <p></p>
                    <span>家常菜</span>
                    <div>4</div>
                </li>
                <li>海鲜系列</li>
                <li>精美凉菜</li>
            </ul>
            <ul class="ul2">
                <li class="li1">家常菜</li>
                <li class="li2">
                    <img src="/static/imgs_s10/S_10order1.01.png" alt="">
                    <div class="b1">
                        <p class="p1"><span>特价</span></p>
                        <p class="p2">内蒙古烤羊肉串</p>
                        <p class="p3">月售48</p>
                        <p class="p4">原价:¥48.00/份</p>
                        <p class="p5">¥36.00/份</p>
                    </div>
                    <div class="b2">
                        <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt="">
                        <span class="span1"></span>
                        <span class="span2">1</span>
                        <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3"></span>
                    </div>
                </li>
                <li class="li3">
                    <img src="/static/imgs_s10/S_10order1.02.png" alt="">
                    <div class="b3">
                        <p class="p1"> <span>特价</span></p>
                        <p class="p2">长沙臭豆腐</p>
                        <p class="p3">月售48</p>
                        <p class="p3">原价:¥48.00/份</p>
                        <p class="p5">¥12.00/份</p>
                    </div>
                    <div class="b4">
                        <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt="">
                        <span class="span1"></span>
                        <span class="span2">2</span>
                        <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3"></span>
                    </div>
                </li>
                <li class="li4">
                    <img src="/static/imgs_s10/S_10order1.03.png" alt="">
                    <div class="b5">
                        <p class="p2">关东煮串串香</p>
                        <p class="p3">月售48</p>
                        <p class="p5">¥9.90/份</p>
                    </div>
                    <div class="b6">
                        <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt="">
                        <span class="span1"></span>
                        <span class="span2">2</span>
                        <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3"></span>
                    </div>
                </li>
                <li class="li5">
                    <img src="/static/imgs_s10/S_10order1.04.png" alt="">
                    <div class="b7">
                        <p class="p2">老北京烤鸭</p>
                        <p class="p3">月售48</p>
                        <p class="p5">¥68.00/份</p>
                    </div>
                    <div class="b8">
                        <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3"></span>
                    </div>
                </li>
                <li class="li6">
                    <img src="/static/imgs_s10/S_10order1.05.png" alt="">
                    <div class="b9">
                        <p class="p2">道口烧鸡</p>
                        <p class="p3">月售48</p>
                        <p class="p5">¥38.00/份</p>
                    </div>
                    <div class="b10">
                        <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt="">
                        <span class="span1"></span>
                        <span class="span2">1</span>
                        <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3"></span>
                    </div>
                </li>
            </ul>
        </section>
        <!-- <footer>
            <img class="footer-imgs1" id="imgs" src="/static/imgs_s10/S_10order1.06.png" alt="">
            <span class="span-1">4</span>
            <div class="div1">
                <span class="span1">合计</span>
                <span class="span2">￥117.80</span>
            </div>
            <div class="div2">选好了</div>
        </footer> -->



        <!-- 购物车页面 -->
        <!-- 蒙版 -->
        <div class="mask" id="mask"></div>
        <div class="cart" id="cart">
            <img class="imgs-1" id="imgs-1" src="/static/imgs_s10/S_10order1.06.png" alt="">
            <span class="span-1">4</span>
            <span class="span-2"></span>
            <div class="c">
                <div class="c1">
                    <img class="c1-imgs1" src="/static/imgs_s10/S_10order2.02.png" alt="">
                    <span class="c1-span1">全选</span>
                    <span class="c1-span2">（已选3种）</span>
                    <img class="c1-imgs2" src="/static/imgs_s10/S_10order2.01.png" alt="">
                    <span class="c1-span3">清空购物车</span>
                </div>
                <div class="c2">
                    <img class="c2-imgs1" src="/static/imgs_s10/S_10order2.03.png" alt="">
                    <img class="c2-imgs2" src="/static/imgs_s10/S_10order1.01.png" alt="">
                    <div class="c2-div1">
                        <span class="c2-span1">内蒙古羊肉串</span><br>
                        <span class="c2-span2">¥36.00</span>
                    </div>
                    <div class="c2-div2">
                        <span class="c2-div2-span1"></span>
                        <span class="c2-div2-span2"></span>
                        <span class="c2-div2-span3">1</span>
                        <span class="c2-div2-span4"></span>
                        <span class="c2-div2-span5"></span>
                        <span class="c2-div2-span6"></span>
                    </div>


                </div>
                <div class="c3">
                    <img class="c3-imgs1" src="/static/imgs_s10/S_10order2.03.png" alt="">
                    <img class="c3-imgs2" src="/static/imgs_s10/S_10order1.02.png" alt="">
                    <div class="c3-div1">
                        <span class="c3-span1">长沙臭豆腐</span><br>
                        <span class="c3-span2">¥24.00</span>
                    </div>
                    <div class="c3-div2">
                        <span class="c3-div2-span1"></span>
                        <span class="c3-div2-span2"></span>
                        <span class="c3-div2-span3">2</span>
                        <span class="c3-div2-span4"></span>
                        <span class="c3-div2-span5"></span>
                        <span class="c3-div2-span6"></span>
                    </div>
                </div>

                <div class="c4">
                    <img class="c4-imgs1" src="/static/imgs_s10/S_10order2.03.png" alt="">
                    <img class="c4-imgs2" src="/static/imgs_s10/S_10order1.03.png" alt="">
                    <div class="c4-div1">
                        <span class="c4-span1">关东煮串串香</span><br>
                        <span class="c4-span2">¥19.80</span>
                    </div>
                    <div class="c4-div2">
                        <span class="c4-div2-span1"></span>
                        <span class="c4-div2-span2"></span>
                        <span class="c4-div2-span3">2</span>
                        <span class="c4-div2-span4"></span>
                        <span class="c4-div2-span5"></span>
                        <span class="c4-div2-span6"></span>
                    </div>
                </div>

                <div class="c5">
                    <img class="c5-imgs1" src="/static/imgs_s10/S_10order2.02.png" alt="">
                    <img class="c5-imgs2" src="/static/imgs_s10/S_10order1.05.png" alt="">
                    <div class="c5-div1">
                        <span class="c5-span1">道口烧鸡</span><br>
                        <span class="c5-span2">¥38.00</span>
                    </div>
                    <div class="c5-div2">
                        <span class="c5-div2-span1"></span>
                        <span class="c5-div2-span2"></span>
                        <span class="c5-div2-span3">1</span>
                        <span class="c5-div2-span4"></span>
                        <span class="c5-div2-span5"></span>
                        <span class="c5-div2-span6"></span>
                    </div>
                </div>
            </div>
            <div class="d">
                <span class="d-span1">合计：</span>
                <span class="d-span2">￥79.80</span>
                <span class="d-span3">选好了</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>


        .box {
            width: 100%;
            height: 100%;
            position: relative;
            background: rgba(247, 247, 247, 1);
        }

        /* 顶部区块 */
        .header {
            position: absolute;
            left: 0;
            height: 0;
            display: flex;
            align-items: center;
            width: 375px;
            height: 48px;
            background: rgba(255, 255, 255, 1);
        }

        .header .a1 {
            margin-left: 17px;
            width: 299px;
            height: 33px;
            background: rgba(247, 247, 247, 1);
            border-radius: 17px;
            display: flex;
            align-items: center;
        }

        .header .a2 {
            margin-left: 15px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
        }

        .header .a1 img {
            margin-left: 12px;
            width: 12px;
            height: 12px;
        }

        .header .a1 div {
            margin-left: 13px;
            width: 2px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 1px;
        }

        .header .a1 span {
            margin-left: 4px;
            width: 97px;
            height: 12px;
            line-height: 12px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(158, 158, 158, 1);
        }

        /* 中间区块左部分 */
        section .ul1 {
            position: absolute;
            left: 0;
            top: 48px;
        }

        section .ul1 li {
            position: absolute;
            left: 14px;
            width: 88px;
            height: 12px;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }

        .ul1 li:nth-child(1) {
            top: 22px;
        }

        .ul1 li:nth-child(2) {
            top: 72px;
        }

        .ul1 li:nth-child(3) {
            top: 122px;
        }

        .ul1 li:nth-child(4) {
            left: 0px;
            top: 160px;
            width: 88px;
            height: 39px;
            background: rgba(255, 255, 255, 1);
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
        }

        .ul1 li:nth-child(4) p {
            position: absolute;
            left: 0;
            top: 14px;
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
        }

        .ul1 li:nth-child(4) span {
            position: absolute;
            left: 15px;
            top: 10px;
        }

        .ul1 li:nth-child(4) div {
            position: absolute;
            left: 55px;
            top: 4px;
            width: 17px;
            height: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
        }

        .ul1 li:nth-child(5) {
            top: 220px;
        }

        .ul1 li:nth-child(6) {
            top: 270px;
        }

        /* 中右 */
        section .ul2 {
            position: absolute;
            left: 79px;
            top: 48px;
            width: 296px;
            height: 595px;
            background: rgba(255, 255, 255, 1);
            display: flex;
            flex-direction: column;
        }

        section .ul2 li {
            display: flex;
            flex-direction: row;
            margin-top: 17px;
            width: 296px;
            height: 85px;
        }

        section .ul2 .li1 {
            width: 286px;
            height: 12px;
            margin-top: 14px;
            margin-left: 10px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 10px;
        }

        section .ul2 li img {
            margin-left: 10px;
            margin-right: 10px;
            width: 85px;
            height: 85px;
        }

        /* 图右 */
        section .ul2 li .p1 {
            width: 30px;
            height: 13px;
            background: rgba(228, 41, 56, 1);
            border-radius: 3px;
        }

        section .ul2 li .p1 span {
            margin-left: 3px;
            line-height: 13px;
            font-size: 9px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 10px;
        }

        section .ul2 li .p2 {
            width: 100px;
            height: 12px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        section .ul2 li .p3 {
            width: 40pxpx;
            height: 10px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        .p4 {
            width: 72px;
            height: 11px;
            font-size: 10px;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(163, 165, 168, 1);
        }

        .p4 {
            margin-top: 6px;
            width: 100px;
            height: 14px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(232, 91, 77, 1);
        }

        .b1 .p2,
        .b3 .p2 {
            margin-top: 8px;
        }

        .b5 .p2,
        .b7 .p2,
        .b9 .p2 {
            margin-top: 5px;
        }

        .b1 .p3,
        .b3 .p3 {
            margin-top: 5px;
        }

        .b5 .p3,
        .b7 .p3,
        .b9 .p3 {

            margin-top: 11px;
        }

        .b1 .p5,
        .b3 .p5 {
            margin-top: 5px;
        }

        .b5 .p5,
        .b7 .p5,
        .b9 .p5 {
            margin-top: 28px;
        }

        .b2,
        .b4,
        .b6,
        .b8,
        .b10 {
            position: relative;
            margin-left: 20px;
            margin-top: 67px;
            width: 74px;
            height: 21px;
            display: flex;
            justify-content: space-between;
        }

        section .ul2 li .b2 .img1,
        section .ul2 li .b4 .img1,
        section .ul2 li .b6 .img1,
        section .ul2 li .b8 .img1,
        section .ul2 li .b10 .img1 {
            position: absolute;
            left: 0px;
            top: -5px;
            width: 21px;
            height: 21px;
            margin: 0;
            padding: 0;
        }

        .b2 .span3,
        .b4 .span3,
        .b6 .span3,
        .b8 .span3,
        .b10 .span3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 21px;
            height: 21px;
            background: rgba(50, 177, 108, 1);
            border-radius: 50%;
        }

        section .ul2 li .b2 .img2,
        section .ul2 li .b4 .img2,
        section .ul2 li .b6 .img2,
        section .ul2 li .b8 .img2,
        section .ul2 li .b10 .img2 {
            position: absolute;
            right: 0;
            top: -5px;
            width: 21px;
            height: 21px;
            margin: 0;
            padding: 0;
            z-index: 1;
        }

        .b2 .span1,
        .b4 .span1,
        .b6 .span1,
        .b10 .span1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 21px;
            height: 21px;
            border: 1px solid rgba(218, 219, 222, 1);
            border-radius: 50%;
        }

        .b2 .span2,
        .b4 .span2,
        .b6 .span2,
        .b8 .span2,
        .b10 .span2 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -80%);
            width: 4px;
            height: 10px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
        }

        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 375px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
            z-index: 10;
        }

        footer img {
            position: absolute;
            left: 7px;
            bottom: 5px;
            width: 56px;
            height: 56px;
        }

        footer .span-1 {
            position: absolute;
            left: 46px;
            bottom: 42px;
            width: 17px;
            height: 17px;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        footer .div1 {
            position: absolute;
            left: 138px;
            top: 18px;
            width: 120px;
            height: 20px;
        }

        footer div .span1 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }

        footer div .span2 {
            font-size: 14px;
            font-weight: 400;
            color: #E85B4D;
        }

        footer .div2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 127px;
            height: 45px;
            background: rgba(50, 177, 108, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

        }


        /* 购物车页面 */
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 375px;
            height: 217px;
            background: rgba(221, 221, 221, 0.8);
            display: block;
            z-index: 20;
        }

        .cart {
            display: block;
        }

        .cart .imgs-1 {
            position: absolute;
            left: 16px;
            top: 147px;
            width: 50px;
            height: 50px;
            z-index: 30;
        }

        .cart .span-1 {
            position: absolute;
            left: 54px;
            top: 146px;
            width: 17px;
            height: 17px;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .cart .c {
            position: absolute;
            left: 0;
            top: 217px;
            width: 375px;
            height: 404px;
            padding-bottom: 60px;
            background: rgba(255, 255, 255, 1);
            border-radius: 6px 6px 0px 0px;
            display: flex;
            flex-direction: column;
            z-index: 5;
        }

        .c1 {
            /* position: absolute;
    left: 0;
    top: 0; */
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 375px;
            height: 44px;
        }

        .c1 .c1-imgs1 {
            margin-left: 13px;
            width: 18px;
            height: 18px;
        }

        .c1 .c1-span1 {
            margin-left: 15px;
            width: 25px;
            height: 11px;
            line-height: 11px;
            font-size: 11px;
            font-weight: 500;
            color: rgba(37, 37, 37, 1);
        }

        .c1 .c1-span2 {
            margin-left: 8px;
            width: 70px;
            height: 12px;
            line-height: 12px;
            font-size: 11px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .c1 .c1-imgs2 {
            margin-left: 140px;
            width: 13px;
            height: 13px;
        }

        .c1 .c1-span3 {
            margin-left: 3px;
            width: 60px;
            height: 11px;
            line-height: 11px;
            font-size: 11px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .c2,
        .c3,
        .c4,
        .c5 {
            position: relative;
            margin-top: 21px;
            width: 375px;
            height: 69px;
            display: flex;
            flex-direction: row;
        }

        .c2 {
            margin-top: 7px;
        }

        /* 第一列图 */
        .c2-imgs1,
        .c3-imgs1,
        .c4-imgs1,
        .c5-imgs1 {
            margin-left: 13px;
            margin-top: 26px;
            width: 18px;
            height: 18px;
        }

        /* 食品图 */
        .c2-imgs2,
        .c3-imgs2,
        .c4-imgs2,
        .c5-imgs2 {
            margin-left: 17px;
            margin-top: 0px;
            width: 69px;
            height: 69px;
        }

        /* 图右字 */
        .c2-div1,
        .c3-div1,
        .c4-div1,
        .c5-div1 {
            margin-left: 8px;
            margin-top: 4px;
            width: 100px;
            height: 39px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .c2-span1,
        .c3-span1.c4-span1.c5-span1 {
            margin-top: 4px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        .c2-span2,
        .c3-span2,
        .c4-span2,
        .c5-span2 {
            margin-top: 14px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(232, 91, 77, 1);
        }

        /* 加减号 */
        .c2-div2,
        .c3-div2,
        .c4-div2,
        .c5-div2 {
            position: absolute;
            left: 294px;
            bottom: 0;
            width: 62px;
            height: 21px;
        }

        .c2-div2-span1,
        .c3-div2-span1,
        .c4-div2-span1,
        .c5-div2-span1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 21px;
            height: 21px;
            border: 1px solid rgba(218, 219, 222, 1);
            border-radius: 50%;
        }

        /* 减号的横 */
        .c2-div2-span2,
        .c3-div2-span2,
        .c4-div2-span2,
        .c5-div2-span2 {
            position: absolute;
            left: 5px;
            top: 10px;
            width: 12px;
            height: 2px;
            background: rgba(176, 176, 176, 1);
            border-radius: 1px;
            z-index: 10;
        }

        .c2-div2-span3,
        .c3-div2-span3,
        .c4-div2-span3,
        .c5-div2-span3 {
            position: absolute;
            left: 28px;
            height: 5px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            line-height: 20px;
        }

        /* 加号背景 */
        .c2-div2-span4,
        .c3-div2-span4,
        .c4-div2-span4,
        .c5-div2-span4 {
            position: absolute;
            right: 0;
            top: 0;
            width: 21px;
            height: 21px;
            background: rgba(50, 177, 108, 1);
            border-radius: 50%;
        }

        /* 十字的竖 */
        .c2-div2-span5,
        .c3-div2-span5,
        .c4-div2-span5,
        .c5-div2-span5 {
            position: absolute;
            left: 50px;
            bottom: 4px;
            width: 2px;
            height: 12px;
            background: rgba(255, 255, 255, 1);
            border-radius: 1px;
            z-index: 10;
        }

        /* 加号的横 */
        .c2-div2-span6,
        .c3-div2-span6,
        .c4-div2-span6,
        .c5-div2-span6 {
            position: absolute;
            left: 45px;
            top: 10px;
            width: 12px;
            height: 2px;
            background: rgba(255, 255, 255, 1);
            border-radius: 1px;
            z-index: 10;
        }

        .d {
            position: fixed;
            bottom: 0;
            background-color: white;
            width: 375px;
            height: 45px;
            z-index: 20;
        }

        .d-span1 {
            position: absolute;
            left: 10px;
            top: 17px;
            font-size: 14px;
            width: 50px;
            height: 13px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 13px;
        }

        .d-span2 {
            position: absolute;
            left: 50px;
            top: 17px;
            width: 50px;
            height: 13px;
            line-height: 13px;
            font-size: 14px;
            color: #E85B4D;
        }

        .d-span3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 127px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            background: rgba(50, 177, 108, 1);
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    </style>
